<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <button class="get">获取</button>
    <button class="set">设置</button>

    <form class="form">
        <p>
            <label for="user">用户名:</label>
            <!-- 
                写在标签内 => 页面加载时默认操作
                hidden="hidden"        默认隐藏
                required = "required"  默认必填 
                disabled = "disabled"  默认禁用
                checked="checked"      默认选中
            -->
            <input type="text" name="user" value="" placeholder="请输入..." required>
        </p>
        <p>
            <label for="pwd">密&emsp;码:</label>
            <input type="text" name="pwd">
        </p>
        <p>
            <label>
                <input type="checkbox" name="isRem" checked="checked">
                记住用户和密码?
            </label>
        </p>
        <p>
            <input class="submit" type="submit" value="提交">
            <input class="reset" type="reset" value="重置">
        </p>
    </form>


</body>
<script>

    // 元素节点的属性 表单相关

    // value  获取和设置表单元素的value值

    // input 相关
    // type  获取和设置表单元素的type类型
    // name  获取和设置表单元素的name属性
    // placeholder  获取和设置表单元素的提示内容

    // min
    // max
    // step


    // select
    // value 获取和设置下拉框的value值(被选中的option中的值)
    // a. 如果option中存在value属性,优先取value中的值
    // a. 如果option中不存在value属性,则取option标签内的值

    // selectedIndex     获取和设置被选中的option的下标
    // selectedOptions   获取被选中的option的集合 (常用于多选)


    // 表单元素状态相关
    // hidden    获取和设置 表单元素是否隐藏(true:隐藏 false:显示(默认))
    // required  获取和设置 表单元素是否必填(true:必填 false:非必填(默认))
    // disabled  获取和设置 表单元素是否禁用(true:禁用 false:不禁用(默认))
    // checked   获取和设置 表单元素(radio checkbox)是否选中(true:选中 false:不选中(默认))

    var submitBtn = document.getElementsByClassName("submit")[0];
    var getBtn = document.getElementsByClassName("get")[0];
    var setBtn = document.getElementsByClassName("set")[0];
    var userInp = document.getElementsByName("user")[0];
    var pwdInp = document.getElementsByName("pwd")[0];
    var isRem = document.getElementsByName("isRem")[0];


    getBtn.onclick = function () {
        console.log(userInp.required);
        console.log(userInp.hidden);
        console.log(userInp.disabled);
        console.log(isRem.checked);
    }

    setBtn.onclick = function () {
        userInp.required = false;
        // userInp.hidden = true;
        userInp.disabled = true;

        isRem.checked = isRem.checked ? false : true;
    }









</script>


</html>